@extends('admin.layout.global')

@section('css-plugins')
    <link href="{{ asset('style/plugins/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css') }}" rel="stylesheet">
    <link href="{{ asset('style/plugins/cropper/cropper.min.css') }}" rel="stylesheet">
    <link href="{{ asset('style/plugins/toastr/toastr.min.css') }}" rel="stylesheet">
@endsection

@section('css')
    <link href="{{ asset('style/admin/css/custom.css') }}" rel="stylesheet">
    <link href="{{ asset('style/plugins/cropper/main.css') }}" rel="stylesheet">
@endsection

@section('js-plugins')
    <script src="{{ asset('style/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
    <script src="{{ asset('style/plugins/cropper/cropper.min.js') }}"></script>
    <script src="{{ asset('style/plugins/toastr/toastr.min.js') }}"></script>
@endsection

@section('js')
    <script src="{{ asset('style/admin/js/pages/blankon.form.element.js') }}"></script>
    <script src="{{ asset('style/plugins/cropper/main.js') }}"></script>
    <script>
        $(function(){
            $('#basicInformation input').keyup(function(){
                $('#basicInformation button').attr('disabled', false);
            });
            toastr.options = {
                "progressBar": true,
                "positionClass": "toast-top-right",
                "timeOut": "1200",
                "isReload":true
            }
        });
    </script>
@endsection

@section('content')
    <div class="body-content animated fadeIn" id="crop-avatar">
        <div class="row">
            <div class="col-md-4">
                <div class="panel rounded shadow" id="leftMove">
                    <div class="panel-heading">
                        <div class="pull-left">
                            <h3 class="panel-title">{{ getLang('Tips', 'basicInformation') }}</h3>
                        </div><!-- /.pull-left -->
                        <div class="pull-right">
                        </div><!-- /.pull-right -->
                        <div class="clearfix"></div>
                    </div><!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="inner-all">
                            <ul class="list-unstyled">
                                <li class="text-center">
                                    <img title="点击更换头像" class="img-circle img-bordered-primary avatar-view" width="160" src="{{ action('ImgController@getMember', ['uid' => $USER->id, 'sourceName' => $USER->thumb, 'size' => '160x160']) }}" alt="{{ $USER->realName ? $USER->realName : $USER->name }}">
                                </li>
                                <li class="text-center">
                                    <h4 class="text-capitalize">{{ $USER->realName ? $USER->realName : $USER->name }}</h4>
                                    <p class="text-muted text-capitalize">{{ $GROUP[$USER->groupID]->name }}</p>
                                </li>
                            </ul>
                            <form action="{{ action('Admin\MeController@postEdit') }}" method="post">
                                <div class="form-body" id="basicInformation">
                                    {!! csrf_field() !!}
                                    <div class="form-group">
                                        <label class="control-label">{{ getLang('fieldsMember', 'nickname') }}</label>
                                        <input placeholder="" name="realName" value="{{ $USER->realName }}" class="form-control" type="text">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ getLang('fieldsMember', 'email') }}</label>
                                        <input placeholder="{{ getLang('fieldsMember', 'emailHelp') }}" name="email" value="{{ $USER->email }}" class="form-control" type="email">
                                        {!! getErrorMsg($errors, 'email') !!}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ getLang('fieldsMember', 'phone') }}</label>
                                        <input placeholder="{{ getLang('fieldsMember', 'phoneHelp') }}" name="phone" value="{{ $USER->phone }}" class="form-control" type="text">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ getLang('fieldsMember', 'password') }}<span class="asterisk">*</span></label>
                                        <input placeholder="" name="password" value="" class="form-control" type="password">
                                        {!! getErrorMsg($errors, 'password') !!}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ getLang('fieldsMember', 'password2') }}<span class="asterisk">*</span></label>
                                        <input placeholder="" name="password_confirmation" value="" class="form-control" type="password">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button class="btn btn-primary btn-sm btn-block" type="submit" disabled><i class="fa fa-check"></i>&nbsp;{{ getLang('Tips', 'submit') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div><!-- /.panel-body -->
                </div><!-- /.panel -->
            </div>
        </div><!-- /.row -->
        <!-- Cropping modal -->
        <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <form class="avatar-form" action="{{ action('Admin\MeController@postUpload') }}" enctype="multipart/form-data" method="post">
                        {!! csrf_field() !!}
                        <input type="hidden" name="id" value="{{ $USER->id }}"/>
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal" type="button">&times;</button>
                            <h4 class="modal-title" id="avatar-modal-label">上传头像</h4>
                        </div>
                        <div class="modal-body">
                            <div class="avatar-body">

                                <!-- Upload image and data -->
                                <div class="avatar-upload">
                                    <!-- aspectRatio -->
                                    <input type="hidden" id="aspectRatioWidth" value="1">
                                    <input type="hidden" id="aspectRatioHeight" value="1">
                                    <!-- aspectRatio end -->
                                    <input class="avatar-src" name="avatar_src" type="hidden">
                                    <input class="avatar-data" name="avatar_data" type="hidden">
                                    <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                </div>

                                <!-- Crop and preview -->
                                <div class="row">
                                    <div class="col-md-9">
                                        <div class="avatar-wrapper"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="avatar-preview preview-lg"></div>
                                        <div class="avatar-preview preview-md"></div>
                                        <div class="avatar-preview preview-sm"></div>
                                    </div>
                                </div>

                                <div class="row avatar-btns">
                                    <div class="col-md-9">
                                    </div>
                                    <div class="col-md-3">
                                        <button class="btn btn-primary btn-block avatar-save" type="submit">Done</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="modal-footer">
                          <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
                        </div> -->
                    </form>
                </div>
            </div>
        </div><!-- /.modal -->
    </div>
@endsection